<template>
  <view class="my-address-container">
    <!-- 选择收货地址的按钮区域 -->
    <view class="btn-box" v-if="!address.userName">
      <button type="primary" size="mini" @click="chooseAddress">+选择收货地址</button>
    </view>
    <!-- 用户收货地址区域 -->
    <view class="address-box" v-else @click="chooseAddress">
      <view class="row1">
        <view class="user">
          收货人：{{address.userName}}
        </view>
        <view class="phone">
          电话：{{address.telNumber}}
        </view>
      </view>
      <view class="row2">
        <text class="left">收货地址：</text>
        <text>{{address.provinceName + address.cityName + address.countyName + address.detailInfo}}</text>
      </view>
    </view>
    <image src="/static/cart_border@2x.png" mode="" class="cart_border"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 用户选择的收货地址
        address: null
      };
    },
    created() {
      this.address = JSON.parse(uni.getStorageSync('address') || '{}')
    },
    methods: {
      // 选择收货地址的事件处理函数
      async chooseAddress() {
        const res = await uni.chooseAddress().catch(err => err)
        if (res.length === 2) {
          this.address = res[1]
          uni.setStorageSync('address', JSON.stringify(res[1]))
        }
      }
    }
  }
</script>

<style lang="scss">
  .my-address-container {
    padding: 5px;

    .cart_border {
      height: 15rpx;
      width: 100%;
      display: block;
    }

    .btn-box {
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .address-box {
    padding: 5px;
    font-size: 12px;

    .row1 {
      display: flex;
      justify-content: space-between;
    }

    .row2 {
      display: flex;
      align-items: center;
      margin: 10px 0;

      .left {
        white-space: nowrap;
      }
    }
  }
</style>
